<template>
<div class="member-size-page">
    <!-- 提示 -->
    <div class="tip">
      <p>最多可创建10个角色，还能保存{{10 - sizeList.length}}个</p>
      <a href="javascript:;" @click="openSizeEdit({})">+ 新建尺码</a>
    </div>
    <!-- 尺码 -->
    <SizeItem
      v-for="item in sizeList"
      :key="item.id"
      :size="item"
      @on-edit="openSizeEdit"
      @on-delete="deleteSizeItem"
    />
    <!-- 新增尺码/编辑尺码的弹窗 -->
    <SizeEdit ref="sizeEditCom"  @on-success="successHandler"></SizeEdit>
  </div>
  <div class="info-size"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import SizeEdit from './size-edit.vue'
import SizeItem from './size-item.vue'
import { findSizeList, deleteSize } from '@/api/personal'
import Message from '@/components/library/message'
import Confirm from '@/components/library/confirm'
export default {
  name: 'PersonalSize',
  components: {
    SizeEdit,
    SizeItem
  },
  setup () {
    // 组件挂载后执行获取地址列表数据函数
    onMounted(() => {
      getSizeList()
    })
    const sizeList = ref([])
    const getSizeList = () => {
      findSizeList().then(data => {
        sizeList.value = data.result
        // 1.遍历尺码列表数据
        sizeList.value.forEach(item => {
          // 2.如果尺码列表中存在默认尺码，就将默认尺码显示为列表首位
          if (item.isDefault === 0) {
            sizeList.value.reverse()
          }
        })
      })
    }
    // 打开添加编辑我的尺码组件
    const sizeEditCom = ref(null)
    const openSizeEdit = (item) => {
      // 添加 {} 修改 {数据}
      sizeEditCom.value.open(item)
    }
    const deleteSizeItem = (size) => {
      Confirm({ text: '亲，您确定要删除该条尺码信息吗？' }).then(() => {
        deleteSize(size.id).then(() => {
          Message({ type: 'success', text: '删除成功' })
          getSizeList()
        })
      }).catch(e => {})
    }
    const successHandler = (formData) => {
      // 根据formData中的ID去当前尺码列表中查找，有就是修改，否则是添加
      const size = sizeList.value.find(item => item.id === formData.id)
      if (size) {
        // 修改
        for (const key in size) {
          size[key] = formData[key]
        }
      } else {
        // 如果是添加：向list中追加一条
        // 当修改formData的时候，数组中数据也会更新，因为是同一个引用地址
        // 什么时间修改formData，当你打开对话框需要清空之前的输入信息
        // 克隆formData数据
        const jsonStr = JSON.stringify(formData)
        // eslint-disable-next-line vue/no-mutating-props
        sizeList.value.unshift(JSON.parse(jsonStr))
        getSizeList()
      }
    }
    return { openSizeEdit, sizeEditCom, sizeList, deleteSizeItem, successHandler }
  }
}
</script>

<style lang="less" scoped>
.member-size-page {
  padding: 20px;
  min-height: 400px;
  position: relative;
  .tip {
    height: 50px;
    background: #f5f5f5;
    line-height: 50px;
    padding: 0 20px;
    color: #999;
    display: flex;
    p {
      flex: 1;
    }
    a {
      color: #27ba9b;
      width: 100px;
      text-align: right;
    }
  }
}
</style>
